<template>
	<view class="content-box">
		<div :class="show?'detail':'detail minHeight'">
			<u-parse :content="content" />
			<div class="mask" v-if="!show">
				
			</div>
		</div>
		<p class="more" @click="showContent">{{!show?'查看更多':(height>300?'收起':'')}}</p>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default{
		data(){
			return {
				moreTitle:'查看更多',
				show:true,
				height:0,
				content:''
			}
		},
		props:{
			detail:{
				type:String,
				default:''
			}
		},
		watch:{
			'detail' (){
				let _this=this
				this.content = this.detail
					setTimeout(()=>{							
						let dom=uni.createSelectorQuery().in(this).select('.detail')
						dom.fields({size:true},data=>{
							_this.height=data.height
							if(data.height>400){
								this.show=false
							}
						}).exec()
					},1000)
			}
		},
		components:{
			uParse
		},
		methods:{
			showContent(){
				this.show=!this.show
			}
		}
	}
</script>

<style lang="less" scoped>
.detail{
	overflow: hidden;
	padding: 20upx;
	position: relative;
	height:auto;
	/deep/ img{max-width:100%;}
}
.minHeight{
	height: 400upx;
}
.content-box{
	position:relative;
	background: #FFF;
	.more{
		text-align: center;
		font-size: 26upx;
		color:#333;
		padding-bottom:20upx;
		cursor: pointer;
	}
}
.mask {
	background-image:linear-gradient(-180deg, rgba(255,255,255,0.00) 6%, #ffffff 97%);
	border-radius:4px;
	width:100%;
	position: absolute;
	bottom:0px;
	height:100upx;
}
</style>
